<template>
	<view>
		<uni-easyinput v-model="inputValue" :inputBorder="inputBorder" :placeholder="placeholder"
			:primaryColor="primaryColor" :clearable="clearable" @focus="onFocus" @clear="onClear" />
		<uni-popup ref="popup" type="bottom">
			<view class="buttons">
				<text class="button cancel" @click="cancel">取消</text>
				<text class="button confirm" @click="confirm">确定</text>
			</view>
			<view class="content">
				<uni-list class="list">
					<uni-list-item :title="item.text" @click="onClick(index)" clickable :key="index"
						v-for="(item,index) in list">
						<template v-slot:footer v-if="item.selected">
							<uni-icons :type="iconType" size="auto" :color="iconColor"></uni-icons>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	/**
	 * DataChecklist 数据选择器 - 单选
	 * @description 通过数据渲染的弹层选择组件，依赖 uni-list 组件
	 * 
	 * @tutorial https://uniapp.dcloud.io/component/uniui/uni-data-select
	 * @property {String} value 默认值
	 * @property {Array} localdata 本地数据 ，格式 [{text:'',value:''}]
	 * @property {Boolean} clearable 是否可以清空已选项
	 * @property {Boolean} disabled 是否禁用
	 * @property {Boolean} inputBorder 是否显示input输入框的边框（默认true）
	 * @property {String} placeholder 输入框的提示文字
	 * @property {String} primaryColor 主题色
	 * @property {String} keyName 选项对象中，需要展示的属性键名（默认 'text' ）
	 * 
	 * @event {Function} confirm  点击确定按钮触发
	 * @event {Function} cancel  点击取消按钮触发
	 * @event {Function} clear 点击清除按钮触发
	 * @event {Function} change 内容变化触发
	 */

	export default {
		name: "wgh-select",
		data() {
			return {
				inputValue: '',
				selectedIndex: '',
				selectedValue: '',
				list: [],
			};
		},
		props: {
			value: {
				type: String | Number | Boolean,
				default: ''
			},
			localdata: {
				type: Array,
				default () {
					return []
				}
			},
			clearable: {
				type: Boolean,
				default: true
			},
			inputBorder: {
				type: Boolean,
				default: true
			},
			placeholder: {
				type: String,
				default: '请选择'
			},
			primaryColor: {
				type: String,
				default: '#007aff'
			},
			iconType: {
				type: String,
				default: 'checkmarkempty'
			},
			iconColor: {
				type: String,
				default: '#000'
			},
			keyValue: {
				type: String,
				default: 'value'
			},
			keyName: {
				type: String,
				default: 'text'
			},
			joinFlag: {
				type: String,
				default: ','
			}
		},
		watch: {
			value(newValue, oldValue) {
				this.$emit('change', newValue)
			},
			localdata: {
				immediate: true,
				handler(val, old) {
					if (Array.isArray(val) && old !== val) {
						val.forEach(i => {
							this.list.push({
								value: i[this.keyValue],
								text: i[this.keyName],
								selected: false
							});
						})
					}
				}
			}
		},
		methods: {
			onFocus(e) {
				uni.hideKeyboard();
				this.$refs.popup.open('bottom')
				this.$emit('focus')
			},
			onClear() {
				this.$emit('clear')
			},
			confirm() {
				this.$emit('input', this.selectedValue);
				this.$emit('confirm', this.selectedIndex);
				this.$refs.popup.close();
			},
			cancel() {
				console.log('cancel');
				this.$refs.popup.close();
				this.$emit('cancel');
			},
			onClick(index) {
				if (this.selectedIndex !== '') {
					this.list[this.selectedIndex].selected = false;
				}
				this.list[index].selected = true;
				this.selectedIndex = index;
				this.inputValue = this.list[index].text;

				this.$emit('click', {
					index: index,
					item: this.localdata[index],
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.buttons {
		background-color: #fff;
		display: flex;
		justify-content: space-between;

		.button {
			padding: 15px 15px;
			cursor: pointer;
		}

		.cancel {
			color: #909193;
		}

		.confirm {
			color: $uni-color-primary;
		}
	}

	.content {
		border: 0px solid blue;
		background-color: #fff;

		.list {
			height: 70vh;
			border: 0px solid red;
			margin-bottom: 20px;
			overflow-y: scroll;
		}
	}
</style>
